<template>
  <div class="page-container">
    <!-- 选项卡 -->
    <tabs :tabs="tabs" :activeName="activeName" @tabClick="handClick"></tabs>
      <!-- 数据 -->
      <div class="table-box">
        <i-table
          :table="tableConfig"
          :tableData="tableData" 
          :page-bean="pageBean"
          @pageChange="pageChange"
        >
          <template slot="searchBox">
            <div class="topsearch">
              <div class="search">
                <el-input
                  placeholder="请输入搜索关键字"
                  prefix-icon="el-icon-search"
                  class="search-inp"
                  v-model="searchInp"
                  @clear="handSearch"
                  clearable
                >
                </el-input>
                <el-button type="primary" size="medium" @click="handSearch"
                  >搜索</el-button
                >
              </div>
            </div>
          </template>
          <template slot="cementOrderVos" slot-scope="props">
            <span>{{props.obj.row.cementOrderVos | cementTxt}}</span>
          </template>
          <template slot="status" slot-scope="props">
            <span>{{props.obj.row.status | statusTxt}}</span>
          </template>
          <template slot="op" slot-scope="props">
            <el-button type="text" @click="linkToDetail(props.obj.row.id)">查看详情</el-button>
          </template>
        </i-table>
      </div>
    </div>
</template>

<script>
import iTable from "@/components/table/table";
import tabs from "@/components/table/tabs";
import { PageBean } from "@/utils/page-bean";
import {QueryCondition} from '@/utils/query-condition';
export default {
  components: { iTable, tabs },
  data() {
    return {
      // 当前tab
      activeName: "0",
      // tabs
      tabs: [
        { label: "全部", name: "0" ,value:""},
        { label: "待确认", name: "1" ,value:"3,4,5"},
        { label: "待发货", name: "2" ,value:"6"},
        { label: "已发货", name: "3" ,value:"7,8"},
        { label: "已完成", name: "4" ,value:"9"},
      ],
      // 表格配置
      tableConfig: {},
      tableData: [],
      pageBean: new PageBean(10, 1, 0),
      searchInp:"",
      queryCondition: new QueryCondition(),
    };
  },
  filters:{
    cementTxt(val){
      let arr = []
      val.map(item => {
        arr.push(`${item.name}/${item.budget}m³`)
      })
      return arr.toString()
    },
    statusTxt(val){
      if(val == 3 || val == 4 || val == 5){
        return '待确认'
      }
      if(val == 6){
        return '待发货'
      }
      if(val == 7 || val == 8){
        return '已发货'
      }
      if(val == 9){
        return '已完成'
      }
    }
  },
  created(){
    this.initTable()
    this.initStatus()
  },
  methods: {
    // 初始化表格
    initTable() {
      this.tableConfig = {
        loading: false,
        hasSelect: false,
        hasIndex: true,
        hasOperation: false,
        hasSearch: true,
        hasPage: true,
        tr: [
          {
            label: "订单编号",
            minWidth: "100",
            prop: "num",
          },
          {
            label: "标题",
            minWidth: "120",
            prop: "title",
          },
          {
            label: "下单时间",
            minWidth: "100",
            prop: "finalApprovedTime",
          },
          // {
          //   label: "联系人",
          //   minWidth: "80",
          //   prop: "contact",
          // },
          // {
          //   label: "联系电话",
          //   minWidth: "80",
          //   prop: "tel",
          // },
          // {
          //   label: "详细地址",
          //   minWidth: "120",
          //   prop: "address",
          // },
          {
            label: "商品信息",
            minWidth: "120",
            prop: "cementOrderVos",
            show: "template",
          },
          {
            label: "要求供应时间",
            minWidth: "100",
            prop: "supplyTime",
          },
          {
            label: "状态",
            minWidth: "100",
            prop: "status",
            show: "template",
          },
          {
            label: "操作",
            minWidth: "80",
            prop: "op",
            show: "template",
          },
        ],
      };
    },
    //切换选项卡
    handClick(e){
      this.activeName = e
      this.initStatus()
    },
    //默认状态
    initStatus(){
      this.queryCondition.pageNum = 1
      this.pageBean.pageIndex = 1;
      this.refreshTableData()     
    },
    //刷新表格数据
    refreshTableData(){
      console.log()
      this.tableConfig.loading = true;
      this.$api.orderList(Object.assign(this.queryCondition,{status:this.tabs[this.activeName].value})).then(res => {
        this.tableData = res.records
        this.pageBean.Total = res.total;
        this.tableConfig.loading = false;
      }).catch(()=>{
        this.tableConfig.loading = false;
      })
    },
    //分页
    pageChange(pageBean) {
      this.queryCondition.current = pageBean.pageIndex;
      this.queryCondition.size = pageBean.pageSize;
      this.refreshTableData();
    },
    //搜索
    handSearch() {
      this.queryCondition.keywords = this.searchInp;
      this.queryCondition.current = 1;
      this.pageBean.pageIndex = 1;
      this.refreshTableData();
    },
    linkToDetail(id){
      this.$router.push({
        name:"Detail",
        query:{
          id:id
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.table-box{
  padding:20px;
}
.topsearch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .select{
    display: flex;
    align-items: center;
    label{
      font-size: 14px;
      color: #333;
      margin-right: 20px;
    }
  }
  .search-inp{
    width: 400px;
    margin-right: 20px;
  }
}
</style>